<script setup lang="ts">
import App from '@/views/link/addLink/components/app/index.vue'
import WX from '@/views/link/addLink/components/wx/index.vue'
import KingDoc from '@/views/link/addLink/components/kingDoc/index.vue'
import QR from '@/views/link/addLink/components/qr/index.vue'
import FirmWx from '@/views/link/addLink/components/firmWx/index.vue'
import TengXun from '@/views/link/addLink/components/tengxun/index.vue'
import { onMounted, ref } from 'vue'
import xcx from '@/assets/link/xcx.png'
import jinshan from '@/assets/link/jinshan.png'
import caoliao from '@/assets/link/caoliao.png'
import qywx from '@/assets/link/qywx.png'
import wx from '@/assets/link/wx.png'
import tengxun from '@/assets/link/tengxun.png'
import { userStore } from '@/stores'

const tabsList = [
  // { id: 5, name: '跳转到微信二维码', icon: wx },
  { id: 11, name: '跳转到腾讯优码', icon: tengxun },
  { id: 3, name: '跳转到草料二维码', icon: caoliao },
  { id: 4, name: '跳转到企业微信', icon: qywx },
  { id: 2, name: '跳转到金山文档', icon: jinshan },
  // { id: 1, name: '跳转到小程序', icon: xcx },

]
const user = userStore
// tabs点击事件
const type = ref(11)
const tabsChange = (id: any) => {
  type.value = id
}
onMounted(() => {
  userStore.refreshUserInfo()
})
const store = userStore
const isAdmin = ref(false)
if (store.$state.userInfo.type == 3) {
  isAdmin.value = true
}
</script>

<template>
  <el-card class="margin-b-20">
    <div class="top-box">
      <div
        class="tab-box"
        :class="{ active: type === item.id }"
        @click="tabsChange(item.id)"
        v-for="item in tabsList"
        :key="item.id"
      >
        <img class="margin-right-20" style="height: 40px; width: 40px" :src="item.icon" alt="" />
        <span>{{ item.name }}</span>
      </div>
    </div>
  </el-card>
  <div class="text-center m-b-20 text-main" v-if="!isAdmin">剩余创建个数:{{ user.userInfo.link_amount }}个</div>
  <el-card>
    <!--  链接类型 1-跳转小程序 2-跳转金山文档 3-跳转草料二维码 4-跳转企业微信 5-跳转落地小程序  -->
    <!-- <app v-if="type === 1" :type="type"></app> -->
    <teng-xun v-if="type === 11" :type="type"></teng-xun>
    <q-r v-if="type === 3" :type="type"></q-r>
    <firm-wx v-if="type === 4" :type="type"></firm-wx>
    <king-doc v-if="type === 2" :type="type"></king-doc>
    <!-- <w-x v-if="type === 5" :type="type"></w-x> -->
  </el-card>
</template>

<style scoped lang="scss">
.top-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.tab-box {
  padding: 20px;
  display: flex;
  flex: 1;
  margin: 5px;
  align-items: center;
  font-size: 16px;
  min-width: 230px;
  height: 76px;
  background-color: #f9faff;
  cursor: pointer;
}
.active {
  background-color: #2b6bff;
  color: #fff;
}
</style>
